<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CompareCommutingPeriod</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script src="js/CompareCommute.js"></script>
  <script src="js/CompareCommuteDest.js"></script>
   <script src="js/Welcome.js"></script>
  <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkAB1PgArCoAGnp8RYDahPGOvVRr2WRDk&sensor=false"></script>
  <script type="text/javascript" src="js/util.js"></script>
</head>

<body onload="initializeFothMap();">
<div id="logo"><img src="images/co2Logo.png" width="350" height="70" style="margin-top:10px;"/></div>
<div id="titleText" style="margin-top: 20px;font-size: 15px;font-weight: normal;margin-left: 10px;">Welcome to an app that let you display and compare selected data from Commute Greener!<br>
For more information and solutions visit <a href="http://www.CommuteGreener.com">www.CommuteGreener.com</a> or take a direct contact <a href="mailto:CommuteGreener@volvo.com">CommuteGreener@volvo.com</a> </div>
 <div id ="maps" style="width: 760px;margin-left: 20px;margin-top: 10px;">
 <div id="map_previous" style="width:329px; height:300px;float: left;margin-right: 10px;"></div>
   <div id="map_canvasCompared" style="width:329px; height:300px;float: left;"></div>
 

 <!--  <input id="auto-button" type="submit" name="auto-button" value="See" onclick="initializeDestMap();" >
--> 
 </div>
  <div id="contact_form" style="padding-left:10px; width:760px;font-family: sans-serif;">  
  <div id="co2" style="width: 329px;float:left;padding-top: 2px;">
  <input id="auto-button" type="button" name="auto-button" value="See" onclick="initializeStartMap();" >               

   <%  if(request.getAttribute("journeyPreviousCount")!= null ){
    	  %>
<p><b><%= request.getAttribute("journeyPreviousCount")%>   Journeys </b></p>
<%} %>
<table style="width: 329px;">
    <%  if(request.getAttribute("imgPreviousUrlCar")!= null || request.getAttribute("imgPreviousUrlBus")!= null || request.getAttribute("imgPreviousUrlBicycle")!= null
    		|| request.getAttribute("imgPreviousUrlWalking")!= null || request.getAttribute("imgPreviousUrlTrain")!= null || request.getAttribute("imgPreviousUrlFerry")!= null
    		|| request.getAttribute("imgPreviousUrlAeroplane")!= null ){
    	  %>
    
      <tr>
      <td  style="padding-right: 60px;"></td>
          <td style="text-align:left;width: 30px;"><b>g Co2</b></td>
          <td style="text-align:left;width: 30px;"><b>Km</b></td>
          <td style="text-align:left;width: 30px;"><b>%Km</b></td> 
          </tr>
       <%
          }else{
              %>
              <tr><b>No Journeys Found</b></tr>
              <%} %>
          <%
          if(request.getAttribute("imgPreviousUrlCar")!= null && request.getAttribute("iconPreviousUrlCar")!= null && request.getAttribute("totalPreviousCo2Car")!= null){  	  
        	  %>
        	  <tr>
        	  
          <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlCar")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlCar")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	     <td style="text-align: left;"> <%= request.getAttribute("totalPreviousCo2Car")%>g</td>
        	  <td style="text-align: left;"> <%= request.getAttribute("totalPreviousDistanceCar")%> </td>
        	   <td style="text-align: left;"> <%= request.getAttribute("percentageCarKMPrev")%> </td>
        	  
        	   
        	   </tr>
          <%
          }
          %>
         
         <%
          if(request.getAttribute("imgPreviousUrlBus")!= null && request.getAttribute("iconPreviousUrlBus")!= null && request.getAttribute("totalPreviousCo2Bus")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlBus")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlBus")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	  <td> <%= request.getAttribute("totalPreviousCo2Bus")%>g</td>
        	   <td> <%= request.getAttribute("totalPreviousDistanceBus")%> </td>
        	    <td> <%= request.getAttribute("percentageBusKMPrev")%> </td>
        	   
        	    
        	   </tr> 
          <%
          }
          %>
          
          <%
          
          if(request.getAttribute("imgPreviousUrlBicycle")!= null && request.getAttribute("iconPreviousUrlBicycle")!= null && request.getAttribute("totalPreviousCo2Bicycle")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlBicycle")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlBicycle")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	    <td> <%= request.getAttribute("totalPreviousCo2Bicycle")%>g</td>
        	   <td> <%= request.getAttribute("totalPreviousDistanceBicycle")%> </td>
        	   <td> <%= request.getAttribute("percentageBicycleKMPrev")%> </td>
        	   
        	 
        	   </tr> 
          <%
          }
          %>
          
           <%
          if(request.getAttribute("imgPreviousUrlWalking")!= null && request.getAttribute("iconPreviousUrlWalking")!= null && request.getAttribute("totalPreviousCo2Walking")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlWalking")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlWalking")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	          	   <td > <%= request.getAttribute("totalPreviousCo2Walking")%>g</td>
        	   <td> <%= request.getAttribute("totalPreviousDistanceWalking")%> </td>
        	    <td> <%= request.getAttribute("percentageWalkingKMPrev")%> </td>
        	   
        	    
        	   </tr> 
          <%
          }
          %>
          
          

         <%
          if(request.getAttribute("imgPreviousUrlTrain")!= null && request.getAttribute("iconPreviousUrlTrain")!= null && request.getAttribute("totalPreviousCo2Train")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlTrain")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlTrain")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	     <td > <%= request.getAttribute("totalPreviousCo2Train")%>g</td>
        	  <td> <%= request.getAttribute("totalPreviousDistanceTrain")%> </td>
        	    <td> <%= request.getAttribute("percentageTrainKMPrev")%> </td>
        	  
        	
        	  </tr> 
          <%
          }
          %>
        
          
        <%
          if(request.getAttribute("imgPreviousUrlFerry")!= null && request.getAttribute("iconPreviousUrlFerry")!= null && request.getAttribute("totalPreviousCo2Ferry")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlFerry")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlFerry")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	      <td > <%= request.getAttribute("totalPreviousCo2Ferry")%>g</td>
        	    <td> <%= request.getAttribute("totalPreviousDistanceFerry")%> </td>
        	    <td> <%= request.getAttribute("percentageFerryKMPrev")%> </td>
        	    </tr> 
          <%
          }
          %>
 
  <%
 
          if(request.getAttribute("imgPreviousUrlAeroplane")!= null && request.getAttribute("iconPreviousUrlAeroplane")!= null && request.getAttribute("totalPreviousCo2Aeroplane")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconPreviousUrlAeroplane")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgPreviousUrlAeroplane")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	     <td> <%= request.getAttribute("totalPreviousCo2Aeroplane")%>g</td>
        	   <td> <%= request.getAttribute("totalPreviousDistanceAeroplane")%> </td>
        	    <td> <%= request.getAttribute("percentageAeroplaneKMPrev")%> </td>
        	   
        	  
        	   </tr> 
          <%
          }
          %>
          <%
          if(request.getAttribute("totalDistancePrevious")!= null && 
        		request.getAttribute("totalCo2Previous")!= null){
        	  
        	  
        	  %>
       <tr>
      <td style="width: 10%;text-align:right;"><b>TOTAL</b></td>
        <td style="text-align:left;"><b> <%= request.getAttribute("totalCo2Previous")%>g</b></td>
       <td style="text-align:left;"><b><%= request.getAttribute("totalDistancePrevious")%></b></td></tr>
       <%
          }
          %>
          </table>
  


 </div>
 
 
 
  <div id="compare_form" style="padding-left:10px;width: 328px;float: left;font-family: sans-serif;">  
   <%  if(request.getAttribute("journeyCount")!= null ){
    	  %>
<p><b><%= request.getAttribute("journeyCount")%>   Journeys </b></p>
<%} %>
<table style="width: 329px;">
    <%  if(request.getAttribute("imgUrlCar")!= null || request.getAttribute("imgUrlBus")!= null || request.getAttribute("imgUrlBicycle")!= null
    		|| request.getAttribute("imgUrlWalking")!= null || request.getAttribute("imgUrlTrain")!= null || request.getAttribute("imgUrlFerry")!= null
    		|| request.getAttribute("imgUrlAeroplane")!= null ){
    	  %>
    
      <tr>
      <td style="padding-right: 60px;"></td>
       <td style="text-align:left;width: 60px;"><b>g Co2</b></td> 
       <td style="text-align:left;width: 60px;"><b>Km</b></td>
        <td style="text-align:left;width: 60px;"><b>%Km</b></td> 
         
         
      </tr>
       <%
          }else{
          %>
          <tr><b>No Journeys Found</b></tr>
          <%} %>
    
      
        
          
          <%
          if(request.getAttribute("imgUrlCar")!= null && request.getAttribute("iconUrlCar")!= null && request.getAttribute("totalCo2Car")!= null){
        	  
        	  
        	  %>
        	  <tr>
        	  
          <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlCar")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlCar")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	   <td style="text-align: left;"> <%= request.getAttribute("totalCo2Car")%>g</td>
        	  <td style="text-align: left;"> <%= request.getAttribute("totalDistanceCar")%> </td>
        	   <td style="text-align: left;"> <%= request.getAttribute("percentageCarKM")%></td>
        	   </tr>
          <%
          }
          %>
         
         <%
          if(request.getAttribute("imgUrlBus")!= null && request.getAttribute("iconUrlBus")!= null && request.getAttribute("totalCo2Bus")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlBus")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlBus")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	   <td > <%= request.getAttribute("totalCo2Bus")%>g</td>
        	   <td > <%= request.getAttribute("totalDistanceBus")%> </td>
        	    <td> <%= request.getAttribute("percentageBusKM")%> </td>
        	  
        	     <td style="text-align: left;"> </td>
        	     
        	  </tr> 
          <%
          }
          %>
          
          <%
          if(request.getAttribute("imgUrlBicycle")!= null && request.getAttribute("iconUrlBicycle")!= null && request.getAttribute("totalCo2Bicycle")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlBicycle")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlBicycle")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	   <td > <%= request.getAttribute("totalCo2Bicycle")%>g</td>
        	   <td > <%= request.getAttribute("totalDistanceBicycle")%> </td>
        	     <td> <%= request.getAttribute("percentageBicycleKM")%> </td>
        	  
        	  </tr> 
          <%
          }
          %>
          
           <%
          if(request.getAttribute("imgUrlWalking")!= null && request.getAttribute("iconUrlWalking")!= null && request.getAttribute("totalCo2Walking")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlWalking")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlWalking")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	      <td > <%= request.getAttribute("totalCo2Walking")%>g</td>
        	   <td > <%= request.getAttribute("totalDistanceWalking")%> </td>
        	   <td> <%= request.getAttribute("percentageWalkingKM")%> </td>
        	
        	  </tr> 
          <%
          }
          %>
          
          

         <%
          if(request.getAttribute("imgUrlTrain")!= null && request.getAttribute("iconUrlTrain")!= null && request.getAttribute("totalCo2Train")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlTrain")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlTrain")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	     <td > <%= request.getAttribute("totalCo2Train")%>g</td>
        	  <td > <%= request.getAttribute("totalDistanceTrain")%> </td>
        	     <td> <%= request.getAttribute("percentageTrainKM")%> </td>
        	
        	  </tr> 
          <%
          }
          %>
        
          
        <%
          if(request.getAttribute("imgUrlFerry")!= null && request.getAttribute("iconUrlFerry")!= null && request.getAttribute("totalCo2Ferry")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlFerry")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlFerry")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	       <td > <%= request.getAttribute("totalCo2Ferry")%>g</td>
        	    <td > <%= request.getAttribute("totalDistanceFerry")%> </td>
        	     <td> <%= request.getAttribute("percentageFerryKM")%> </td>
        	
        	  </tr> 
          <%
          }
          %>
 
  <%
          if(request.getAttribute("imgUrlAeroplane")!= null && request.getAttribute("iconUrlAeroplane")!= null && request.getAttribute("totalCo2Aeroplane")!= null){
        	  
        	  
        	  %>
        	 <tr>
        	 <td style="text-align:center;">
        	  <img src=<%= request.getAttribute("iconUrlAeroplane")%> style="float: left;padding-right: 4px;" alt="transportIcon" height="10px;" width="10px;"/><img src=<%= request.getAttribute("imgUrlAeroplane")%> style="float: left;" alt="transport mode" height="42px" width="40px;" /></td>
        	 	   <td > <%= request.getAttribute("totalCo2Aeroplane")%>g</td>
        	   <td > <%= request.getAttribute("totalDistanceAeroplane")%> </td>
        	    <td> <%= request.getAttribute("percentageAeroplaneKM")%> </td>
        
        	  </tr> 
          <%
          }
          %>
          <%
          if(request.getAttribute("totalDistance")!= null && request.getAttribute("totalCo2")!= null){
        	  
        	  
        	  %>
       <tr>
      <td style="width: 10%;text-align:right;"><b>TOTAL</b></td>
         <td style="text-align:left;"><b> <%= request.getAttribute("totalCo2")%>g</b></td>
       <td style="text-align:left;"><b><%= request.getAttribute("totalDistance")%></b></td>
     </tr>
       <%
          }
          %>
          </table>
          <INPUT type="button" value="Back" onclick="history.back()" class="button">
  <input type="submit"  value="New Search" class="button" onclick="newSearch();" >
  </div>
    <div id="footerText" style="padding-bottom: 10px;">All rights reserved 2012. Made in collaboration between Volvo Group and IT-university of Goteborg by Namrata Mukherjee and Hui Zhou. Commute Greener IT for Facebook just show selected data, approximate locations and consolidated views. For more information and solutions visit  <a href="http://www.CommuteGreener.com">www.CommuteGreener.com</a> or   <a href="http://www.trafiklab.se/api/commuting-pattern">www.trafiklab.se</a> 
take a direct contact <a href="mailto:CommuteGreener@volvo.com">CommuteGreener@volvo.com</a> </div>
	
</div>
</body>
</html>